<DocMatNavMenu></DocMatNavMenu>
<h5 class="mat-h5">Example</h5>

<DemoContainer>
    <Content>
        @using Microsoft.AspNetCore.Components

        <MatNavMenu>
            <MatNavItem OnClick="ClickMe" Title="Item 1">Item 1 - OnClick</MatNavItem>
            <MatNavItem Disabled="true" Title="Item 2">Item 2</MatNavItem>
            <MatNavSubMenu @bind-Expanded="@navSubMenuOpenState">
                <MatNavSubMenuHeader>
                    <MatNavItem AllowSelection="false"><MatIcon Icon="all_inbox"></MatIcon>&nbsp; Item 3 - Expanded: @navSubMenuOpenState</MatNavItem>
                </MatNavSubMenuHeader>
                <MatNavSubMenuList>
                    <MatNavItem Href="#">Item 3.A&nbsp; <MatIcon Icon="backup"></MatIcon></MatNavItem>
                    <MatNavItem>Item 3.B&nbsp; <MatIcon Icon="build"></MatIcon></MatNavItem>
                    <MatNavItem>Item 3.C&nbsp; <MatIcon Icon="explore"></MatIcon></MatNavItem>
                </MatNavSubMenuList>
            </MatNavSubMenu>
            <MatNavItem><MatIcon Icon="grade"></MatIcon>&nbsp; Item 4 </MatNavItem>
            <MatDivider></MatDivider>
            <MatNavItem><MatIcon Icon="face"></MatIcon>&nbsp; Item 5</MatNavItem>
            <MatNavSubMenu>
                <MatNavSubMenuHeader>
                    <MatNavItem AllowSelection="false"><MatIcon Icon="explore"></MatIcon>&nbsp; Item 6</MatNavItem>
                </MatNavSubMenuHeader>
                <MatNavSubMenuList>
                    <MatNavItem Disabled="true" Href="#">Item 6.A</MatNavItem>
                    <MatNavItem>Item 6.B</MatNavItem>
                    <MatNavItem>Item 6.C</MatNavItem>

                </MatNavSubMenuList>
            </MatNavSubMenu>

            <MatNavItem Href="/Checkbox">Internal Href Checkbox</MatNavItem>
            <MatNavItem Href="/Checkbox" ForceLoad="true">ForceLoad - Internal Href Checkbox</MatNavItem>
            <MatNavItem Href="https://blazorboilerplate.com/" Target="_blank">Blazor Boilerplate - Href - Target = _blank</MatNavItem>
            <MatNavItem Href="https://www.matblazor.com/">MatBlazor - Href</MatNavItem>
        </MatNavMenu>


        @code
        {
            [Inject] IJSRuntime JS { get; set; }

            bool navSubMenuOpenState;

            async Task ClickMe()
            {
                Console.WriteLine("test");
                await JS.InvokeAsync<object>("alert", "Successful OnClick!");
            }
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        @using Microsoft.AspNetCore.Components

        <MatNavMenu>
            <MatNavItem OnClick=""ClickMe"" Title=""Item 1"">Item 1 - OnClick</MatNavItem>
            <MatNavItem Disabled=""true"" Title=""Item 2"">Item 2</MatNavItem>
            <MatNavSubMenu @bind-Expanded=""@navSubMenuOpenState"">
                <MatNavSubMenuHeader>
                    <MatNavItem AllowSelection=""false""><MatIcon Icon=""all_inbox""></MatIcon>&nbsp; Item 3 - Expanded: @navSubMenuOpenState</MatNavItem>
                </MatNavSubMenuHeader>
                <MatNavSubMenuList>
                    <MatNavItem Href=""#"">Item 3.A&nbsp; <MatIcon Icon=""backup""></MatIcon></MatNavItem>
                    <MatNavItem>Item 3.B&nbsp; <MatIcon Icon=""build""></MatIcon></MatNavItem>
                    <MatNavItem>Item 3.C&nbsp; <MatIcon Icon=""explore""></MatIcon></MatNavItem>
                </MatNavSubMenuList>
            </MatNavSubMenu>
            <MatNavItem><MatIcon Icon=""grade""></MatIcon>&nbsp; Item 4 </MatNavItem>
            <MatDivider></MatDivider>
            <MatNavItem><MatIcon Icon=""face""></MatIcon>&nbsp; Item 5</MatNavItem>
            <MatNavSubMenu>
                <MatNavSubMenuHeader>
                    <MatNavItem AllowSelection=""false""><MatIcon Icon=""explore""></MatIcon>&nbsp; Item 6</MatNavItem>
                </MatNavSubMenuHeader>
                <MatNavSubMenuList>
                    <MatNavItem Disabled=""true"" Href=""#"">Item 6.A</MatNavItem>
                    <MatNavItem>Item 6.B</MatNavItem>
                    <MatNavItem>Item 6.C</MatNavItem>

                </MatNavSubMenuList>
            </MatNavSubMenu>

            <MatNavItem Href=""/Checkbox"">Internal Href Checkbox</MatNavItem>
            <MatNavItem Href=""/Checkbox"" ForceLoad=""true"">ForceLoad - Internal Href Checkbox</MatNavItem>
            <MatNavItem Href=""https://blazorboilerplate.com/"" Target=""_blank"">Blazor Boilerplate - Href - Target = _blank</MatNavItem>
            <MatNavItem Href=""https://www.matblazor.com/"">MatBlazor - Href</MatNavItem>
        </MatNavMenu>


        @code
        {
            [Inject] IJSRuntime JS { get; set; }

            bool navSubMenuOpenState;

            async Task ClickMe()
            {
                Console.WriteLine(""test"");
                await JS.InvokeAsync<object>(""alert"", ""Successful OnClick!"");
            }
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Nested Sub Menus</h5>
<DemoContainer>
    <Content>
        <div class="mat-elevation-z4" style="padding: 10px;">
            <MatSlideToggle @bind-Value="MultiChecked" Label="@("Multi: " + MultiChecked)" />
            <MatButton OnClick="@(() => navMenu.ToggleAllSubMenus(true))">Expand All</MatButton>
            <MatButton OnClick="@(() => navMenu.ToggleAllSubMenus(false))">Collapse All</MatButton>
        </div>
        <MatNavMenu @ref="navMenu"  Multi="MultiChecked">
            <MatNavItem Title="Level 1 Item A">Level 1 Item A</MatNavItem>
            <MatNavItem Title="Level 1 Item B">Level 1 Item B</MatNavItem>

            <MatNavSubMenu>
                <MatNavSubMenuHeader Title="Level 1 Sub Menu A">
                    <MatNavItem AllowSelection="false">
                        <MatIcon Icon="folder" />&nbsp;Level 1 Sub Menu A
                    </MatNavItem>
                </MatNavSubMenuHeader>

                <MatNavSubMenuList>
                    <MatNavItem Title="Level 2 Item A.A">Level 2 Item A.A</MatNavItem>
                    <MatNavItem Title="Level 2 Item A.B">Level 2 Item A.B</MatNavItem>
                </MatNavSubMenuList>

            </MatNavSubMenu>


            <MatNavSubMenu>
                <MatNavSubMenuHeader Title="Level 1 Sub Menu B">
                    <MatNavItem AllowSelection="false">
                        <MatIcon Icon="folder" />&nbsp;Level 1 Sub Menu B
                    </MatNavItem>
                </MatNavSubMenuHeader>

                <MatNavSubMenuList>
                    <MatNavItem Title="Level 2 Item B.A">Level 2 Item B.A</MatNavItem>
                    <MatNavItem Title="Level 2 Item B.B">Level 2 Item B.B</MatNavItem>

                    <MatNavSubMenu>
                        <MatNavSubMenuHeader>
                            <MatNavItem AllowSelection="false">
                                <MatIcon Icon="folder_open" />&nbsp;Level 2 Sub Menu B.A
                            </MatNavItem>
                        </MatNavSubMenuHeader>

                        <MatNavSubMenuList>
                            <MatNavItem>Level 3 Item B.A.A</MatNavItem>
                            <MatNavItem>Level 3 Item B.A.B</MatNavItem>
                        </MatNavSubMenuList>
                    </MatNavSubMenu>

                    <MatNavSubMenu>
                        <MatNavSubMenuHeader>
                            <MatNavItem AllowSelection="false">
                                <MatIcon Icon="folder_open" />&nbsp;Level 2 Sub Menu B.B
                            </MatNavItem>
                        </MatNavSubMenuHeader>

                        <MatNavSubMenuList>
                            <MatNavItem>Level 3 Item B.B.A</MatNavItem>
                            <MatNavItem>Level 3 Item B.B.B</MatNavItem>

                            <MatNavSubMenu>
                                <MatNavSubMenuHeader>
                                    <MatNavItem AllowSelection="false">
                                        <MatIcon Icon="group" />&nbsp;Level 3 Sub Menu B.B.A
                                    </MatNavItem>
                                </MatNavSubMenuHeader>

                                <MatNavSubMenuList>
                                    <MatNavItem><MatIcon Icon="face" />&nbsp;Level 4 Item B.B.A.A</MatNavItem>
                                    <MatNavItem><MatIcon Icon="face" />&nbsp;Level 4 Item B.B.A.B</MatNavItem>
                                </MatNavSubMenuList>

                            </MatNavSubMenu>

                            <MatNavSubMenu>
                                <MatNavSubMenuHeader>
                                    <MatNavItem AllowSelection="false">
                                        <MatIcon Icon="group" />&nbsp;Level 3 Sub Menu B.B.B
                                    </MatNavItem>
                                </MatNavSubMenuHeader>

                                <MatNavSubMenuList>
                                    <MatNavItem><MatIcon Icon="face" />&nbsp;Level 4 Item B.B.B.A</MatNavItem>
                                    <MatNavItem><MatIcon Icon="face" />&nbsp;Level 4 Item B.B.B.B</MatNavItem>
                                </MatNavSubMenuList>

                            </MatNavSubMenu>
                        </MatNavSubMenuList>

                    </MatNavSubMenu>
                </MatNavSubMenuList>

            </MatNavSubMenu>
        </MatNavMenu>

        @code {
            bool MultiChecked { get; set; }
            MatNavMenu navMenu;
        }
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <div class=""mat-elevation-z4"" style=""padding: 10px;"">
            <MatSlideToggle @bind-Value=""MultiChecked"" Label=""@(""Multi: "" + MultiChecked)"" />
            <MatButton OnClick=""@(() => navMenu.ToggleAllSubMenus(true))"">Expand All</MatButton>
            <MatButton OnClick=""@(() => navMenu.ToggleAllSubMenus(false))"">Collapse All</MatButton>
        </div>
        <MatNavMenu @ref=""navMenu""  Multi=""MultiChecked"">
            <MatNavItem Title=""Level 1 Item A"">Level 1 Item A</MatNavItem>
            <MatNavItem Title=""Level 1 Item B"">Level 1 Item B</MatNavItem>

            <MatNavSubMenu>
                <MatNavSubMenuHeader Title=""Level 1 Sub Menu A"">
                    <MatNavItem AllowSelection=""false"">
                        <MatIcon Icon=""folder"" />&nbsp;Level 1 Sub Menu A
                    </MatNavItem>
                </MatNavSubMenuHeader>

                <MatNavSubMenuList>
                    <MatNavItem Title=""Level 2 Item A.A"">Level 2 Item A.A</MatNavItem>
                    <MatNavItem Title=""Level 2 Item A.B"">Level 2 Item A.B</MatNavItem>
                </MatNavSubMenuList>

            </MatNavSubMenu>


            <MatNavSubMenu>
                <MatNavSubMenuHeader Title=""Level 1 Sub Menu B"">
                    <MatNavItem AllowSelection=""false"">
                        <MatIcon Icon=""folder"" />&nbsp;Level 1 Sub Menu B
                    </MatNavItem>
                </MatNavSubMenuHeader>

                <MatNavSubMenuList>
                    <MatNavItem Title=""Level 2 Item B.A"">Level 2 Item B.A</MatNavItem>
                    <MatNavItem Title=""Level 2 Item B.B"">Level 2 Item B.B</MatNavItem>

                    <MatNavSubMenu>
                        <MatNavSubMenuHeader>
                            <MatNavItem AllowSelection=""false"">
                                <MatIcon Icon=""folder_open"" />&nbsp;Level 2 Sub Menu B.A
                            </MatNavItem>
                        </MatNavSubMenuHeader>

                        <MatNavSubMenuList>
                            <MatNavItem>Level 3 Item B.A.A</MatNavItem>
                            <MatNavItem>Level 3 Item B.A.B</MatNavItem>
                        </MatNavSubMenuList>
                    </MatNavSubMenu>

                    <MatNavSubMenu>
                        <MatNavSubMenuHeader>
                            <MatNavItem AllowSelection=""false"">
                                <MatIcon Icon=""folder_open"" />&nbsp;Level 2 Sub Menu B.B
                            </MatNavItem>
                        </MatNavSubMenuHeader>

                        <MatNavSubMenuList>
                            <MatNavItem>Level 3 Item B.B.A</MatNavItem>
                            <MatNavItem>Level 3 Item B.B.B</MatNavItem>

                            <MatNavSubMenu>
                                <MatNavSubMenuHeader>
                                    <MatNavItem AllowSelection=""false"">
                                        <MatIcon Icon=""group"" />&nbsp;Level 3 Sub Menu B.B.A
                                    </MatNavItem>
                                </MatNavSubMenuHeader>

                                <MatNavSubMenuList>
                                    <MatNavItem><MatIcon Icon=""face"" />&nbsp;Level 4 Item B.B.A.A</MatNavItem>
                                    <MatNavItem><MatIcon Icon=""face"" />&nbsp;Level 4 Item B.B.A.B</MatNavItem>
                                </MatNavSubMenuList>

                            </MatNavSubMenu>

                            <MatNavSubMenu>
                                <MatNavSubMenuHeader>
                                    <MatNavItem AllowSelection=""false"">
                                        <MatIcon Icon=""group"" />&nbsp;Level 3 Sub Menu B.B.B
                                    </MatNavItem>
                                </MatNavSubMenuHeader>

                                <MatNavSubMenuList>
                                    <MatNavItem><MatIcon Icon=""face"" />&nbsp;Level 4 Item B.B.B.A</MatNavItem>
                                    <MatNavItem><MatIcon Icon=""face"" />&nbsp;Level 4 Item B.B.B.B</MatNavItem>
                                </MatNavSubMenuList>

                            </MatNavSubMenu>
                        </MatNavSubMenuList>

                    </MatNavSubMenu>
                </MatNavSubMenuList>

            </MatNavSubMenu>
        </MatNavMenu>

        @code {
            bool MultiChecked { get; set; }
            MatNavMenu navMenu;
        }
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>
